<template>
    <div class="login">
        <!-- 头部 -->
        <van-nav-bar title="会员登录" left-arrow @click-left="onClickLeft($router.go(-1))" />
        <!-- 主体 -->
        <div class="content">
            <h4>手机号登录</h4>
            <p>未注册的手机号登录后将自动注册</p>
            <input type="text" placeholder="请输入手机号" v-model="form.mobile">
            <div class="yzm">
                <input type="text" placeholder="图形验证码" v-model="code">
                <img :src="base64" alt="" class="img_code" @click="getkeycode">
            </div>
            <div class="get_yzm">
                <input type="text" placeholder="请输入短信验证码" v-model="form.smsCode">
                <button @click="getpics">{{ totalSecond === second ? '获取验证码' : second + '秒后发送' }}</button>
            </div>
            <button @click="getlogin">登录</button>
        </div>

    </div>
</template>

<script>
import { getcode, login } from '@/api/login';

export default {
    name: 'Login',
    data() {
        return {
            form: {
                mobile: "",
                smsCode: '',
            },
            code: '',
            base64: '',
            totalSecond: 3,
            second: 3,
            timer: null,
            isAccount: false
        }
    },
    methods: {

        // 获取短信验证码
        async getpics() {
            if (!this.voidFn()) return
            // 如果没有定时器 且 当前秒数与设定秒数相等，则开启定时器
            if (!this.timer && this.second === this.totalSecond) {
                // 开启定时器
                this.$toast('发送成功，请注意查收')

                this.timer = setInterval(() => {
                    console.log('开启定时器');
                    this.second--
                    if (this.second <= 0) {
                        this.form.smsCode = '246810'
                        this.second = this.totalSecond //(定时器归位)
                        clearInterval(this.timer)
                        this.timer = null
                    }
                }, 1000)
            }
        },
        // 获取图形验证码
        async getkeycode() {
            const res = await getcode(this.form)
            const { data: { base64 } } = res
            this.base64 = base64
            console.log(res, 'ccc');

        },
        // 校验手机号和图形验证码是否合格
        voidFn() {
            if (! /^1[3-9]\d{9}$/.test(this.form.mobile)) {
                this.$toast('请输入正确的手机号')
                return false
            }
            if (!/^\w{4}$/.test(this.code)) {
                this.$toast('请输入正确的验证码')
                return false
            }
            return true
        },

        async getlogin() {
            // 提示登录成功
            let res = await login(this.form)
            console.log(res, 'nnn');
            const { token, userId } = res.data

            this.$store.commit('user/get_k_info', { token, userId })
            if (token) {
                this.$toast('登录成功')
                // 判断 看地址栏有无回跳地址
                // 如果有 说明是其他页面拦截到登录页的
                // 如果没有 直接跳转到首页
                const url = this.$route.query.backUrl || '/'
                this.$router.replace(url)
            }
        }

    },
    created() {
        this.getkeycode();
    },

}
</script>

<style lang="less" scoped>
.content {
    padding: 20px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    // align-items: center;
    input {
        border-style: none;
        border-radius: 0;
        border-bottom: 1px solid #ccc;
        width: 240px;
    }

    button {
        background-color: orange;
        color: #333;
    }

    .yzm,
    .get_yzm {
        display: flex;
        justify-content: space-between;
        align-items: center;

        button {
            font-size: 12px;
        }
    }

    .yzm {
        .img_code {
            width: 100px;
        }
    }
}
</style>